<template>
  <div id="class">
    <u-head :title="tit"></u-head>
    <u-nav></u-nav>
    <div class="container">
      <div class="main">
        <div class="left">
          <ul>
            <li v-for="item in arr1" :key="item.id">
              <span >{{ item.catename }}</span>
            </li>
          </ul>
        </div>
        <div class="right">
          <div v-for="item in arr1" :key="item.id" class="goods">
            <p>{{ item.catename }}</p>
            <ul class="aaa">
              <li v-for="i in item.children" :key="i.id" class="goods">
                <span> <img :src="$pregImg+i.img " alt="" /></span>
                <span ref="biaoti">{{ i.catename}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import uHead from "../components/public/uHead.vue";
import uNav from "../components/public/uNav.vue";
import http from "../utils/http"
export default {
  components: {
    uNav,
    uHead,
  },
  data() {
    return {
      tit: "商品分类",
      arr1: []
    };
  },
  mounted(){
    this.goClass()
  },
  methods: {
    goClass() {
      http.get("/api/getcates").then((res) => {
        this.arr1 = res.list;
      });
    },
  },
};
</script>
<style lang='less' scoped>
#class {
  max-width: 7.5rem;
}
.aaa{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.container {
  height: auto;

  background-color: #f3f3f3;
  .main {
    // display: flex;
    margin-top: 1rem;
    overflow: hidden;
    height: auto;
    .left {
      position: fixed;
      left: 0;
      width: 2.3rem;
      height: 10rem;
      padding-top: 0.2rem;
      background-color: #fff;
      overflow-y: scroll;
      padding-bottom: 30px;

      ul {
        li {
          font-size: 0.3rem;
          text-align: center;
          line-height: 1.3rem;
          height: 1.3rem;
          color: #999;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .changeClass {
          display: block;
          width: 100%;
          height: 0.8rem;
          line-height: 0.8rem;
          background-color: #ff6040;
          color: #fff;
        }
      }
    }
    .right {
      //   flex: 1;
      height: auto;
      padding: 0.3rem 0.35rem 0;
      margin-left: 2.2rem;
      .goods {
        height: auto;
        background-color: #fff;
        border-radius: 0.2rem;
        box-shadow: 0.02rem 0.02rem 0.1rem -0.04rem rgb(0, 0, 0, 0.5);
        border: 0.02rem solid #ccc;
        padding-top: 0.4rem;
        padding-bottom: 0.2rem;
        padding-left: 0.2rem;
        p {
          font-size: 0.3rem;
          font-weight: 900;
          padding-bottom: 0.4rem;
        }
        ul {
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          .empty {
            font-size: 0.32rem;
            color: red;
            line-height: 0.8rem;
          }
          li {
            display: flex;
            flex-direction: column;
            padding-bottom: 0.2rem;
            text-align: center;
            span:first-child {
              width: 1.1rem;
              height: 1.1rem;
              border-radius: 50%;
              overflow: hidden;
              background-color: #f3f3f3;
              // text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
              }
            }

            span:last-child {
              margin-top: 0.05rem;
              font-size: 0.24rem;
              white-space: nowrap;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>